<template>
    <div>
        <el-container>
<!--            首页左侧菜单栏-->
            <el-aside style="width: 250px;" class="asideMenu">
                <aside-menu></aside-menu>
            </el-aside>
            <el-container>
<!--                首页头部-->
                <el-header>
                    <el-col :span="24">
                        <Nav/>
                    </el-col>
                </el-header>
<!--                首页主体部分-->
                <el-main>
                    <el-row>
<!--                        Banner区域-->
                         <el-col :span="16">
                             <Banner/>
                         </el-col>
<!--                        排行榜区域-->
                        <el-col :span="8">
                            <Ranking />
                        </el-col>
                    </el-row>
                    <el-row >
                     <el-col >
<!--                         新歌首发-->
                         <el-col :span="6">
                             <NewSongPublish/>
                         </el-col>
<!--                         推荐MV-->
                         <el-col :span="6">
                             <RecommendMV/>
                         </el-col>
<!--                         精选歌单-->
                         <el-col :span="12">
                             <ChoicestPaylist/>
                         </el-col>

                     </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
    import AsideMenu from "@/views/layout/asideMenu";
    import Banner from "./layout/banner";
    import Nav from "./layout/nav";
    import Ranking from "./layout/ranking";
    import NewSongPublish from './layout/newSongPublish';
    import ChoicestPaylist from './layout/choicestPaylist';
    import RecommendMV from './layout/recommendMV';


    export default {
        name: "Home",
        components: {
            AsideMenu,
            Banner,
            Nav,
            Ranking,
            ChoicestPaylist,
            NewSongPublish,
            RecommendMV
        },
        methods:{
            Send(){
                this.$axios({
                    method:'post',
                    url:'http://127.0.0.1:8000/api/test/',
                    data:{
                        "course_id":"1",
                        "course_title":"Harry Poter"
                    }
                }).then(res => {
                    console.log(res.data)
                })
            }
        }
    };
</script>

<style lang='less' scoped>
    .el-header {
        padding: 0;
        border: 0;
    }

    .el-main {
        color: #333333;
        text-align: center;
        /*line-height: 160px;*/
        /*background-color: pink;*/
        background-color: #f9f9f9;
        padding: 0;
    }

    .asideMenu {
        height: 100vh;
        background-color: rgb(232, 236, 239);
    }

</style>